<template>
	<view>
		<!-- 头部区域 -->
		<view class="loginHead">
			<image src="../../static/common/logo1.png"></image>
			<text></text>
		</view>
		<!-- 表单区域 -->
		<view>
			

		<view class="loginForm">
			<view><text :class="edClass=='1'?'ed ':'no' " @click="ed(1)">账号密码登录</text><text>|</text><text :class="edClass=='2'?'ed':'no' " @click="ed(2)">手机号登录</text></view>
			<!-- 账号密码登录 -->
			<template v-if="edClass=='1'?true:false" class="">
			<view class="user animated fadeInDown"><text class="icon iconfont icon-user">&#xe600;</text><input auto-blur="true" cursor-spacing="20"  v-model="username" :placeholder-style='placeholderStyle' maxlength="13"  placeholder="请输入账号/手机号"  /></view>
			<view class="pwd animated fadeInDown"><text class="icon iconfont icon-mima"></text><input auto-blur="true" cursor-spacing="20"  v-model="password" maxlength="13" :placeholder-style='placeholderStyle' placeholder="请输入密码" type="password" /></view>
			<view class="code animated fadeInDown"><text class="icon iconfont icon-yanzhengma-copy"></text>
			<input auto-blur="true" @blur="blurInput" v-model="imageCode" :placeholder-style='placeholderStyle' maxlength="4" placeholder="请输入验证码" />
				<image  @click="GetCode()" :src="code"></image>
			</view>
		    </template>
			
			<!-- 手机号登录 -->
			<template v-else-if="edClass=='2'?true:false" class="animated fadeOut">
				<view class="user animated fadeInUp"><text class="icon iconfont icon-user">&#xe600;</text><input auto-blur="true" v-model="mobilePhone" :placeholder-style='placeholderStyle' maxlength="11"  placeholder="请输入手机号" /></view>
				<view class="code animated fadeInUp"><text class="icon iconfont icon-yanzhengma-copy"></text>
				<input auto-blur="true" type="number" v-model="mobileCode" :placeholder-style='placeholderStyle' maxlength="6" placeholder="请输入验证码" />
					<button @click="getCodeNum()" type="primary">{{!codeTime?'获取验证码':codeTime+'s'}}</button>
				</view>
				<view  class="pwd" style="visibility:hidden;"><text class="icon iconfont icon-mima"></text><input maxlength="18" :placeholder-style='placeholderStyle' placeholder="请输入密码" type="password" /></view>
			</template>
		 </view>
		<view class="formButModel">
			<view><button  :disabled="disabled" class="formBut" @click="login()">登录</button></view>
			<view><text @click="toForgetPwd()">忘记密码？</text> <text @click="toReg()">注册</text></view>
		</view>
		</view>
	</view>
</template>

<script>
	import User from "../../common/user.js"
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		data() {
			return {
				disabled:true,
			  placeholderStyle:'font-size:30rpx;',
			  edClass:'1',
			  username:'',
			  password:'',
			  imageCode:'',
			  code:'',
			  CODE_ID:'',
			  codeTime:0,
			  mobilePhone:'',
			  mobileCode:'',
			  address:'',
			  systemId:'',
			  result:"",
			  appid:"",
			  cursor:''
			  //键盘高度
			};
		},
		watch: {
			username(val) {
				this.change();
			},
			password(val) {
				this.change();
			},
			imageCode(val) {
				this.change();
			},
			mobilePhone(val){
				this.change();
			},
			mobileCode(val){
				this.change();
			}
		},
		created() {
			// this.requestAndroidPermission();
		},
		onReady(){
		this.GetCode();
		this.change();
		//获取系统信息
		this.systemInfo();
		uni.onKeyboardHeightChange(res => {
		  if(res.height==0){
			  this.cursor = 0;
		  }
		  else{
			  this.cursor = 20;
		  }
		})
		},
		methods: {
			blurInput(){
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
				});
			},
			//获取系统信息
			systemInfo(){
			var pinf = plus.push.getClientInfo();
			// console.log(pinf);
			this.systemId = pinf.token;
			this.User.systemId = this.systemId;
			},
			//监听有无输入事件
			change() {
				if (this.username && this.password && this.imageCode || this.mobilePhone && this.mobileCode) {
					this.disabled = false;
					return;
				}
				this.disabled = true;
			},
			//验证手机号
			isPhone(){
				let regex = {
				    mobile:/^1[34578]\d{9}$/
				};
				return regex.mobile.test(this.mobilePhone);
			},
			//获取手机验证码
			getCodeNum(){
				var pinf = plus.push.getClientInfo();
				// console.log(pinf);
				this.appid = pinf.token;
				if(this.codeTime > 0){ 
					uni.showToast({
					title:'不能重复获取',
					icon:"none"
				}); return;}
				if(!this.isPhone()){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:"none"
					});
					return;
				}
				this.codeTime = 60;
				let timer = setInterval(()=>{
					this.codeTime--;
					if( this.codeTime < 1){
						clearInterval(timer);
						this.codeTime = 0;
					}
				},1000)
				uni.request({
					url: this.confige.webUrl+"/code/sms",
					data:{
						mobile:this.mobilePhone,
						appId:this.appid
					},
					success: (res) => {
						console.log(res)
						uni.showToast({
							icon:"none",
							title:res.data.message
						})
						if(res.data.code==401){
							uni.showToast({
								title:res.data.data,
								icon:"none"
							})
						}
					}
				})
			},
			//选中
			ed(e){
				// console.log(e)
				this.edClass=e;
				if(e==1){
					this.mobilePhone = "";
					this.mobileCode = "";
					this.imageCode = "";
				}
				else if(e==2){
						this.username = "";
						this.password = "";
						this.imageCode = "";
				}
			},
			//登录
			login() {
				uni.showLoading({
					title:"登录中..."
				})
				this.disabled = true;
				uni.getLocation({
					geocode:true,
					 success: (res) => {
						// console.log(res);
						this.address = res.address.city;
						this.User.address = this.address;
				
				if(this.edClass == 1){
				uni.request({
					url: this.confige.webUrl+"/login",
					 data:{
						username:this.username,
						password:this.password,
						imageCode:this.imageCode,
						CODE_ID:this.CODE_ID,
						appId:this.systemId,
						area:this.address
					     },
					method:"POST",
					header:{
						'Content-Type':'application/x-www-form-urlencoded',	
					},
					success: (res) => {
						this.disabled = false;
						console.log(res)
						setTimeout(()=>{
							uni.hideLoading();
						},2000)
						uni.showToast({
							icon:"none",
							title:res.data.message
						})
						if(res.data.code==500){
							this.GetCode();
							uni.showToast({
								title:res.data.message,
								icon:"none"
							})
						}
						else if(res.data.code==201){
							this.GetCode();
							uni.showToast({
								title:"账号或密码错误",
							     icon:"none",
							})
							}
							else{
			                let token =res.data.result[0].token;
							this.User.token=token
							uni.setStorageSync('token', token);
							this.User.userInfo=res.data.result[0].user;
							this.User.userRight=res.data.result[0].role[0];
							let userInfo = res.data.result[0].user;
							let userRight = res.data.result[0].role[0];
							uni.setStorageSync('userInfo', userInfo);
			                uni.setStorageSync('userRight', userRight);
							let cont = true;
							// console.log(userInfo.id)
							uni.setStorageSync('isConnnect'+userInfo.id, cont);
							uni.reLaunch({
							url: '../index/index',
							})
							}
					},fail() {
						this.disabled = false;
					}
				})
				}
				else {
					this.isPhone();
					if(!this.isPhone()){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:"none"
						});
						return;
					}
					console.log(this.address)
					uni.request({
						url: this.confige.webUrl+"/login/mobile",
						 data:{
							mobile:this.mobilePhone,
							smsCode:this.mobileCode,
							appId:this.systemId,
							area:this.address
						     },
						method:"POST",
						header:{
							'Content-Type':'application/x-www-form-urlencoded',	
						},
						success: (res) => {
							console.log(res);
							this.disabled = false;
							setTimeout(()=>{
								uni.hideLoading();
							},2000)
							if(res.data.code==500){
								uni.showToast({
									title:res.data.message,
									icon:"none"
								})
								console.log('错误');
								this.GetCode();
							}
							else if(res.data.code==401){
								// uni.hideLoading();
								uni.showToast({
									title:"账号或密码错误",
								     icon:"none",
								})
								console.log('错误');
								this.GetCode();
								}
								else{
					            let token =res.data.result[0].token;
								this.User.token=token
								uni.setStorageSync('token', token);
								this.User.userInfo=res.data.result[0].user;
								this.User.userRight=res.data.result[0].role;
								let userInfo = res.data.result[0].user;
								let userRight = res.data.result[0].role;
								uni.setStorageSync('userInfo', userInfo);
					            uni.setStorageSync('userRight', userRight);
								let cont = true;
								uni.setStorageSync('isConnnect'+userInfo.id, cont);
								uni.reLaunch({
								url: '../index/index',
								})
								}
						},fail() {
							this.disabled = false;
						}
					})
					
				}
				},
					 fail: (err) => {
					 	console.log(err)
						if(err.errMsg){
							uni.showModal({
								showCancel:false,
								title:"提示",
								content:"该应用需要定位授权才可正常使用，请前往授权",
								success: (res) => {
									if(res.confirm){
										permision.gotoAppPermissionSetting()
									}
								}
							})
						}
					 }
				})
			},
			 //获取验证码
			GetCode(){
				console.log(1);
				uni.request({
					url: this.confige.webUrl+"/code/image",
					 header: {
					       "Content-Type":"image/jpeg"
					         },
					success:(res)=>{
						console.log(res);
						this.code= res.data.result[0].date;
					    this.CODE_ID=res.data.result[0].CODE_ID;
					}
				})
			},
			//前往注册
			toReg(){
				uni.navigateTo({
					url:'../reg/reg'
				})
			},
			
			//前往忘记密码
			toForgetPwd(){
				uni.navigateTo({
					url:'../forgetPassword/forgetPassword'
				})
			}
		}
	}
</script>

<style lang="less" >
	@import "../../common/global.less";
	@import "../../common/icon.css";
	.ed{
		font-weight: bold;
		 color:#007AFF;
		 border-bottom: 4rpx solid @maincolor;
		 
		 }//选中状态
	.no{}//未选中
	//表单头部
	.loginHead {
		height: 450rpx;
		width: 100%;
		// background: linear-gradient(left, #2bd5cb, #49ca99);
		display: flex;
		align-items: center;
		flex-direction: column;
		>image {
			height: 140upx;
			width: 140upx;
			margin-top: 200upx;
			// border-radius: 100%;
		}
		>text {
			font-size: 55rpx;
			font-weight: bold;
			font-family: '黑体';
			margin-top: 80rpx;
			-webkit-text-stroke: 1rpx #000000;
			color: #FFFFFF;
		}
	}
    // 表单按钮组
    .formButModel{
    	padding-top: 60rpx;
		width:75%;
		margin:40rpx auto;
	.formBut::after {
		  border: none;
		}
   .formBut{ border-radius: 90rpx;height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
   >view:nth-of-type(2){display:flex; justify-content: space-between; margin-top: 20rpx; font-size: @fontSize+2rpx; color:#7F7F7F;}
    }
	//表单输入
	.loginForm {
		padding-top: 100rpx;
		padding-bottom: 30rpx;
		height: 30vh;
		width: 90%;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		>view {
			display: flex;
			flex-direction: row;
			width: 90%;
			// margin-left: 40rpx;
			padding-top: 60rpx;
			margin: 10rpx 0rpx 10rpx 40rpx;
		}
		>view:nth-of-type(1){
			display: flex;
			width: 60%;
			margin-left: 4rpx;
			padding-top: 6rpx;
			justify-content: space-around;
			text{ 
				height: 40rpx;
				line-height: 35rpx;
			 color:@fontcolor;
			 font-size:30rpx;
			 padding-bottom: 10rpx;
			 }
		}
		>view>input {
			font-size: @fontSize;
			height: 50rpx;
			width: 80%;
			padding: 5rpx 5rpx 8rpx 10rpx;
			border-bottom: 1rpx solid @fontcolortwo;
			margin-left: 15rpx;
		}
		>view>text {
			font-size: 50rpx;
			color: @maincolor;
		}
		.code {
			display: flex;
			flex-wrap: nowrap;
			>text {
			font-size: 45rpx;
			font-weight: bold;
			padding-left: 5rpx;
		      }
			  >input{ width: 250rpx;}
			  >image{ 
		height: 70rpx;
		width: 190rpx;
		margin-left: 20rpx;
		transform: translate(0,-10rpx);
		border: 2rpx solid #dadada;}
		>button{
			height: 70rpx;
			width: 190rpx;
			margin-left: 20rpx;
			text-align: 70rpx;
			font-size: 25rpx;
			border-radius: 40rpx;
			transform: translate(0,-10rpx);
			border: 2rpx solid #dadada;
		}
		}
	}
</style>
